<template>
    <div>provide和inject</div>
    <p>当前颜色:{{color}}</p>
    <button @click="color='red'">红色</button>
    <button @click="color='yellow'">黄色</button>
    <button @click="color='green'">绿色</button>

    <hr>

    <Son/>
</template>

<script lang="ts">


import {defineComponent, provide, ref} from "vue";
import Son from "./components/Son.vue";


export default defineComponent({
    name: "App",
    components: {
        Son
    },
    setup() {
        let color = ref("red")

        // 提供数据, 爷爷组件， 祖孙页面通讯
        provide("color", color)
        return {
            color
        }
    }
});


</script>

<style>

</style>